<template>
  <view class="flex flex-col items-center justify-center">
    <image
      v-if="qrBase64"
      :src="qrBase64"
      style="width: 400rpx; height: 400rpx; background: #fff; border-radius: 16rpx;"
      mode="aspectFit"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode-generator'

const qrBase64 = ref('')
const props = defineProps({
    code: { type: String, default: 'https://example.com' }
})


onMounted(() => {
  const qr = QRCode(0, 'L')
  qr.addData(props.code)
  qr.make()
  // 8: 每个模块像素，0: margin
  const imgTag = qr.createImgTag(8, 0)
  // 提取 base64
  const match = imgTag.match(/src="([^"]+)"/)
  if (match) {
    qrBase64.value = match[1]
  }
})
</script>